<template>
  <div class="transaction-view">
    <!-- 页面顶部标题 -->
    <div class="header">
      <h1 class="header-title">欢迎使用网上银行</h1>
      
    </div>

    <div class="content">
      <!-- 左侧功能按钮与图标 -->
      <div class="left-section">
        <div class="service-option" @click="openDialog('deposit')">
          <img src="@/assets/OIP-C.jpg" alt="存款图标" class="icon-image" />
          <el-button class="service-button" type="primary">存款</el-button>
        </div>

        <div class="service-option" @click="openDialog('withdraw')">
          <img src="@/assets/OIP-C (1).jpg" alt="取款图标" class="icon-image" />
          <el-button class="service-button" type="primary">取款</el-button>
        </div>

        <div class="service-option" @click="openDialog('balance')">
          <img src="@/assets/OIP-C (2).jpg" alt="余额图标" class="icon-image" />
          <el-button class="service-button" type="primary">查看余额</el-button>
        </div>

        <div class="service-option" @click="openDialog('transfer')">
          <img src="@/assets/OIP-C (3).jpg" alt="转账图标" class="icon-image" />
          <el-button class="service-button" type="primary">转账</el-button>
        </div>

        <!-- 新闻动态标题 -->
      </div>

      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="250px" class="carousel">
        <el-carousel-item v-for="item in carouselImages" :key="item">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>

      <!-- 右侧信息栏 -->
      <div class="right-section">
        <h3>个人信息</h3>
        <p>姓名：张三</p>
        <p>账号：1234567890</p>
        <p>账户类型：储蓄账户</p>
      </div>
    </div>
<!-- 新闻动态和其他银行 -->
<div class="footer-section">
  <div class="news-section">
    <h3 class="news-title">新闻动态</h3>
    <el-collapse v-model="activeName" accordion class="news-collapse">
      <el-collapse-item title="一致性 Consistency" name="1">
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰地感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
      <el-collapse-item title="可控 Controllability" name="4">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
  
  <div class="other-banks-section">
    <h3>其他银行</h3>
    <ul>
      <li><a href="https://www.boc.cn//">中国银行</a></li>
      <li><a href="https://icbc.com.cn/">工商银行</a></li>
      <li><a href="https://www.abchina.com/cn/">农业银行</a></li>
      <li><a href="https://ebanking1.ccb.com.cn/">建设银行</a></li>
    </ul>
  </div>
</div>

    <!-- 各功能对话框 -->
    <el-dialog :visible.sync="dialogVisible.deposit" title="存款">
      <div class="dialog-content">
        <el-input v-model="transactionData.deposit.id" placeholder="存款ID"></el-input>
        <el-input v-model="transactionData.deposit.accountId" placeholder="账户ID"></el-input>
        <el-input v-model="transactionData.deposit.money" placeholder="存入金额"></el-input>
        <el-input v-model="transactionData.deposit.password" type="password" placeholder="密码"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('deposit')">取消</el-button>
        <el-button type="primary" @click="submitTransaction('deposit')">提交</el-button>
      </span>
    </el-dialog>

    <!-- 其他功能对话框 -->
    <el-dialog :visible.sync="dialogVisible.withdraw" title="取款">
      <div class="dialog-content">
        <el-input v-model="transactionData.withdraw.id" placeholder="取款ID"></el-input>
        <el-input v-model="transactionData.withdraw.accountId" placeholder="账户ID"></el-input>
        <el-input v-model="transactionData.withdraw.money" placeholder="取出金额"></el-input>
        <el-input v-model="transactionData.withdraw.password" type="password" placeholder="密码"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('withdraw')">取消</el-button>
        <el-button type="primary" @click="submitTransaction('withdraw')">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible.balance" title="查看余额">
      <div class="dialog-content">
        <el-input v-model="transactionData.balance.password" type="password" placeholder="密码"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('balance')">取消</el-button>
        <el-button type="primary" @click="submitTransaction('balance')">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible.transfer" title="转账">
      <div class="dialog-content">
        <el-input v-model="transactionData.transfer.id" placeholder="转账ID"></el-input>
        <el-input v-model="transactionData.transfer.accountId" placeholder="账户ID"></el-input>
        <el-input v-model="transactionData.transfer.toAccountId" placeholder="目标账户ID"></el-input>
        <el-input v-model="transactionData.transfer.money" placeholder="转账金额"></el-input>
        <el-input v-model="transactionData.transfer.password" type="password" placeholder="密码"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('transfer')">取消</el-button>
        <el-button type="primary" @click="submitTransaction('transfer')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axiosInstance from '@/router/axiosInstance';
export default {
  data() {
    return {
      dialogVisible: {
        deposit: false,
        withdraw: false,
        balance: false,
        transfer: false
      },
      transactionData: {
        deposit: { id: '', accountId: '', money: '', password: '' },
        withdraw: { id: '', accountId: '', money: '', password: '' },
        balance: { password: '' },
        transfer: { id: '', accountId: '', toAccountId: '', money: '', password: '' }
      },
      carouselImages: [
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?w=260&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.rQI_f2quWboYbIh9sV7B8gHaEo?w=310&h=193&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.YFx70Pi14BnNhhxwAgzKGAHaE7?w=278&h=185&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.2rQ25qnSMQHXGcHz3Rp2pAHaEo?w=285&h=180&c=7&r=0&o=5&dpr=2&pid=1.7',
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.DIvzbgmWVKra9fEn7xo_GwHaEo?w=275&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.push('/home');
    },
    openDialog(type) {
      this.dialogVisible[type] = true;
      this.transactionData = {
        deposit: { id: '', accountId: '', money: '', password: '' },
        withdraw: { id: '', accountId: '', money: '', password: '' },
        balance: { password: '' },
        transfer: { id: '', accountId: '', toAccountId: '', money: '', password: '' }
      };
    },
    closeDialog(type) {
      this.dialogVisible[type] = false;
    },
    submitTransaction(type) {
      const password = this.transactionData[type].password;
      if (password === '123456') {
        switch (type) {
        case 'deposit': axiosInstance.post('http://localhost:8080/tradeRecords/CunMoney', this.transactionData[type])
                .then(response => {
                  console.log(response.data)
                  this.$message.success(`${this.getTransactionMessage(type)}成功`);
                    // this.dialogVisible1 = false; // 关闭对话框  
                    //this.fetchData(); // 重新获取数据，以显示新增的用户  
                })
                .catch(error => {
                    console.error('新增失败:', error);
                });break;
        case 'withdraw': axiosInstance.post('http://localhost:8080/tradeRecords/QuMoney', this.transactionData[type])
                .then(response => {
                  console.log(response.data)
                  this.$message.success(`${this.getTransactionMessage(type)}成功`);
                   // this.dialogVisible1 = false; // 关闭对话框  
                    //this.fetchData(); // 重新获取数据，以显示新增的用户  
                })
                .catch(error => {
                    console.error('新增失败:', error);
                });break;
        case 'balance': 
                axiosInstance.get('http://localhost:8080/api/account/1')
                .then(response => {
                  console.log(response.data.balance)
                  this.$message.success(`${this.getTransactionMessage(type)}成功,您的余额为${response.data.balance}`);
                   // this.dialogVisible1 = false; // 关闭对话框  
                    //this.fetchData(); // 重新获取数据，以显示新增的用户  
                })
                .catch(error => {
                    console.error('查询失败:', error);
                });break;
        case 'transfer': axiosInstance.post('http://localhost:8080/tradeRecords/ZhuanMoney', this.transactionData[type])
                .then(response => {
                  console.log(response.data)
                    this.$message.success(`${this.getTransactionMessage(type)}成功`);
                    //this.dialogVisible1 = false; // 关闭对话框  
                   // this.fetchData(); // 重新获取数据，以显示新增的用户  
                })
                .catch(error => {
                    console.error('新增失败:', error);
                });break;
        default: return '';
      }
       
      } else {
        this.$message.error('密码错误');
      }
      this.closeDialog(type);
    },
    getTransactionMessage(type) {
      switch (type) {
        case 'deposit': return '存款';
        case 'withdraw': return '取款';
        case 'balance': return '查看余额';
        case 'transfer': return '转账';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.transaction-view {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-title {
  font-size: 26px;
  font-weight: bold;
  margin: 0%;
  padding: 0%;
  margin-bottom: 20px;
  color: #000000;
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
}

.content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
}

.service-option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.icon-image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.news-title {
  font-size: 18px; /* 标题字体大小 */
  font-weight: bold; /* 字体加粗 */
  margin: 0; /* 取消上下边距 */
  padding-bottom: 5px; /* 增加下边距 */
}

.news-collapse {
  margin-top: 5px; /* 缩小折叠栏与标题之间的间距 */
}
.service-button {
  font-size: 16px;
  width: 100px;
  color: #ffffff;
  background-color: #b3e5fc;
}

.carousel {
  width: 100%; /* 设置宽度为100%，占据整个空白区域 */
  height: 300px;
  margin: 10; /* 去除两侧空白 */
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.right-section {
  width: 250px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #ffffff;
  padding:10px 20px;
  margin-top: 20px;
}

.news-section {
  width: 60%;
}

.other-banks-section {
  width: 35%;
}

.other-banks-section ul li a {
  font-size: 18px;
}

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.dialog-content .el-input {
  margin-bottom: 15px;
}

.dialog-footer .el-button {
  margin: 0 5px;
}
</style>